<template>
  <r-l-layout :leftDefaultWidth="220" :leftMinWidth="220" style="height: 100%">
    <a-card slot="left" style="height: 100%;overflow: auto">
      <a-input-search v-model="shortName" placeholder="请输入..." @search="shortNameSearch"></a-input-search>
      <a-tree
        :checkStrictly="true"
        :replaceFields="replaceFields"
        :selectedKeys.sync="selectedKeys"
        :treeData="treeData"
        showLine
        @select="onSelect"
      />
    </a-card>
    <a-card slot="right" class="right-wrapper" style="height: 100%;overflow: auto">
      <a-tabs v-model="tabActive" style="height: 100%" type="card" @change="tabsChange">
        <a-tab-pane v-if="isShow" :key="0" tab="基本信息">
          <hf-pm-implementation-basic-info ref="HfPmImplementationBasicInfo"
                                           :selectedKeys="selectedKeys"></hf-pm-implementation-basic-info>
        </a-tab-pane>
        <a-tab-pane v-if="isShow" :key="1" tab="项目专题">
          <hf-pm-project-subjects-list ref="HfPmProjectSubjectsList"
                                       :selectedLeftTreeData="selectedLeftTreeData"></hf-pm-project-subjects-list>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="关键目标">
          <hf-pm-project-targets-list ref="HfPmProjectTargetsList"
                                      :selectedLeftTreeData="selectedLeftTreeData"></hf-pm-project-targets-list>
        </a-tab-pane>
        <!--        <a-tab-pane tab="项目任务" :key="3">-->
        <!--          <hf-pm-project-tasks-list-tab :selectedLeftTreeData="selectedLeftTreeData"-->
        <!--                                        ref="HfPmProjectTasksListTab"></hf-pm-project-tasks-list-tab>-->
        <!--        </a-tab-pane>-->
        <a-tab-pane :key="4" tab="项目风险">
          <hf-pm-project-risks-list-tab ref="HfPmProjectRisksListTab"
                                        :selectedLeftTreeData="selectedLeftTreeData"></hf-pm-project-risks-list-tab>
        </a-tab-pane>
        <a-tab-pane :key="5" tab="项目问题">
          <hf-pm-project-questions-list-tab ref="HfPmProjokectQuestionsListTab"
                                            :selectedLeftTreeData="selectedLeftTreeData"></hf-pm-project-questions-list-tab>
        </a-tab-pane>
        <a-tab-pane :key="6" tab="交付物">
          <hf-pm-destination-file-records-list-tab ref="HfPmDestinationFileRecordsListTab"
                                                   :selectedLeftTreeData="selectedLeftTreeData"></hf-pm-destination-file-records-list-tab>
        </a-tab-pane>
        <a-tab-pane :key="7" tab="项目变更">
          <hf-pm-project-change-records-list ref="HfPmProjectChangeRecordsList"
                                             :selectedLeftTreeData="selectedLeftTreeData"></hf-pm-project-change-records-list>
        </a-tab-pane>
        <a-tab-pane v-if="isShow" :key="8" tab="项目采购">
          <hf-pm-project-purchases-list ref="HfPmProjectPurchasesList"
                                        :selectedLeftTreeData="selectedLeftTreeData"></hf-pm-project-purchases-list>
        </a-tab-pane>
        <a-tab-pane v-if="isShow" :key="9" tab="报工统计">
          <hf-pm-work-reports-statistics ref='HfPmWorkReportsStatistics'
                                         :selectedKeys="selectedKeys"></hf-pm-work-reports-statistics>
        </a-tab-pane>
        <a-tab-pane v-if="isShow" :key="10" tab="项目进度">
          <!--          <hf-pm-project-document ref='hfPmProjectDocument'-->
          <!--                                  :selectedKeys="selectedKeys"></hf-pm-project-document>-->
          <hf-pm-project-progress ref='hfPmProjectProgress' :selectedKeys="selectedKeys"></hf-pm-project-progress>
        </a-tab-pane>

      </a-tabs>
    </a-card>
  </r-l-layout>
</template>

<script>
import {getAction} from "@api/manage";
import HfPmProjectSubjectsList from "@views/hifar/pm/HfPmProjectSubjectsList";
import HfPmProjectTargetsList from "@views/hifar/pm/HfPmProjectTargetsList";
import HfPmProjectRisksListTab from "@views/hifar/pm/HfPmProjectRisksListTab";
import HfPmProjectQuestionsListTab from "@views/hifar/pm/HfPmProjectQuestionsListTab";
import HfPmDestinationFileRecordsListTab from "@views/hifar/pm/HfPmDestinationFileRecordsListTab";
import HfPmProjectChangeRecordsList from "@views/hifar/pm/HfPmProjectChangeRecordsList";
import HfPmProjectTasksListTab from "@views/hifar/pm/HfPmProjectTasksListTab";
import HfPmImplementationBasicInfo from "@views/hifar/pm/modules/HfPmImplementationBasicInfo";
import HfPmProjectPurchasesList from "@views/hifar/pm/HfPmProjectPurchasesList";
import HfPmWorkReportsStatistics from '@views/hifar/pm/modules/HfPmWorkReportsStatistics';
import HfPmProjectDocument from '@views/hifar/pm/HfPmProjectDocument'
import HfPmProjectProgress from "@views/hifar/pm/HfPmProjectProgress";

export default {
  name: "HfPmImplementationManage",
  components: {
    HfPmProjectProgress,
    HfPmProjectPurchasesList,
    HfPmImplementationBasicInfo,
    HfPmProjectTasksListTab,
    HfPmProjectChangeRecordsList,
    HfPmDestinationFileRecordsListTab,
    HfPmProjectQuestionsListTab,
    HfPmProjectRisksListTab,
    HfPmProjectTargetsList,
    HfPmProjectSubjectsList,
    HfPmWorkReportsStatistics,
    HfPmProjectDocument
  },
  data() {
    return {
      tabActive: 0,
      selectedKeys: [],
      selectedLeftTreeData: {},
      shortName: "",
      treeData: [],
      replaceFields: {
        children: 'children',
        title: 'title',
        key: 'key',
      },
      isShow: true,
      url: {
        treeList: "pm/pmProject/getProjectTreeData",
      },
    }
  },
  watch: {
    'selectedLeftTreeData.selectedTreeType': {
      handler(val) {
        // 点击二级树展示的tab的key，如果tab的结构有改动，这里也要改
        let subjectKey = [2, 3, 4, 5, 6, 7]
        this.isShow = val !== 'subject';
        if (val === 'subject') {
          if (!subjectKey.includes(this.tabActive)) this.tabActive = 2
        }
      },
    },
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.query && Object.keys(val.query).length > 0) {
          this.getTreeData().then(res => {
            this.treeData = res
            this.selectedKeys = JSON.parse(val.query.id)
            let resFilter = res.filter(item => {
              return item.key === JSON.parse(val.query.id)[0]
            })[0]
            this.selectedLeftTreeData = {
              selectedKeys: JSON.parse(val.query.id)[0],
              selectedTreeType: 'project',
              selectedName: resFilter.realTitle,
              selectedCode: resFilter.code,
              selectedCharger: resFilter.charger,
            }
          })
        } else {
          this.getTreeData().then(res => {
            this.treeData = res
            this.selectedKeys = [res[0].key]
            this.selectedLeftTreeData = {
              selectedKeys: res[0].key,
              selectedTreeType: res[0].treeType,
              selectedName: res[0].realTitle,
              selectedCode: res[0].code,
              selectedCharger: res[0].charger,
            }
          })
        }
      },
    }
  },
  created() {

  },
  methods: {
    tabsChange(value) {
      if (value === 10) {
        this.$refs.hfPmProjectProgress.getById(this.selectedKeys.toString())
      }
    },
    shortNameSearch(value) {
      getAction(this.url.treeList, {shortName: value}).then(res => {
        this.treeData = res
        this.selectedKeys = [res[0].key]
      })
    },
    getTreeData() {
      return new Promise((resolve, reject) => {
        getAction(this.url.treeList).then(res => {
          resolve(res)
        })
      })
    },
    onSelect(selectedKeys, e) {
      let {
        treeType,
        key,
        parentKey,
        realTitle,
        parentRealTitle,
        code,
        parentCode,
        charger,
        playStartTime,
        playEndTime
      } = e.selectedNodes[0].data.props.dataRef
      this.selectedLeftTreeData = {
        selectedTreeType: treeType,
        selectedKeys: treeType === 'project' ? key : parentKey,
        selectedSubKeys: treeType === 'subject' ? key : '',
        selectedName: treeType === 'project' ? realTitle : parentRealTitle,
        selectedSubName: treeType === 'subject' ? realTitle : '',
        selectedCode: treeType === 'project' ? code : parentCode,
        selectedSubCode: treeType === 'subject' ? code : '',
        selectedCharger: charger,
        selectedStartTime: playStartTime,
        selectedEndTime: playEndTime
      }
      this.selectedKeys = selectedKeys
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .right-wrapper {
  .ant-card-body {
    height: 100%
  }

  .ant-tabs-content {
    height: calc(100% - 56px);

    .ant-tabs-tabpane-active {
      height: 100%;
    }
  }
}
</style>